Timeline / Deadline
-
Early registration
27 Jul 2017–27 Sep 2017
-
Awareness scholarship application
1 Jul–27 Sep 2017
-
Standard registration
28 Sep 2017–14 Feb 2018
-
Mock exams and practice questions available
1 Oct 2017
-
Final (late) registration
15 Feb 2018–14 Mar 2018
-
Final deadline for disability requests to be received
19 Mar 2018
-
Final deadline for religious alternate date requests to be received
19 Mar 2018
-
Test center change request deadline
17 Apr 2018
-
Exam admission tickets available
May 2018
-
Exam day
23 Jun 2018
-
Exams graded
Jun–Jul 2018
-
Exam results
Aug 2018
HTML
<ul class="list-unstyled no-margin">
<li class="timeline-date" data-month="July">
<span class="timeline-event"><a href="#">Early registration</a></span>
<p>27 Jul 2017–27 Sep 2017</p>
</li>
<li class="timeline-date" data-month="July">
<span class="timeline-event"><a href="#">Awareness scholarship application</a></span>
<p>1 Jul–27 Sep 2017</p>
</li>
<li class="timeline-date" data-month="September">
<span class="timeline-event"><a href="#">Standard registration</a></span>
<p>28 Sep 2017–14 Feb 2018</p>
</li>
</ul>
Problem Being Solved
Users need to review deadlines for a program or process.
When to Use
This pattern can be used whenever there are multiple, related deadlines to display.
When Not to Use
This pattern should not be used for single dates.
Formatting
Currently, individual tile colors and icons are hard coded.
Competition Timeline
- Local Winner
- Regional Participant
- Global
HTML
<ul class="list-unstyled no-margin">
<li data-content="local" class="competition-timeline">
<span class="timeline-event">Local Winner</span>
</li>
<li data-content="regional" class="competition-timeline">
<span class="timeline-event">Regional Participant</span>
</li>
<li data-content="global" class="competition-timeline"">
<span class="timeline-event">Global</span>
</li>
</ul>
Problem Being Solved
Users need to visually see where they stand in the ongoing competition.
When to Use
This pattern can be used whenever there is a competition timeline.
When Not to Use
This pattern should not be used for anything other than competition timelines.
Formatting
The icon images are hard coded according to "data-content" attribute.